<template>
  <view class="content">
    <view
      class="preview"
      id="video-container"
      :data-device-id="deviceId"
      :data-content-width="contentWidth"
      :data-content-height="contentHeight"
    ></view>
    <!-- <view class="control-panel">
      <view class="control-buttons">
        <template v-for="button in controlButtons" :key="button.direction">
          <view
            :class="['control-btn' + button.type, button.position]"
            @touchstart="handleControl(button.direction)"
            @touchend="handleControlStop(button.direction)"
          >
            <image class="iconfont" :src="button.icon" />
          </view>
        </template>
      </view>
    </view> -->
  </view>
</template>

<script lang="ts">
// renderjs 部分
export default {
  options: {
    virtualHost: true,
  },
};
</script>

<script setup lang="ts">
import { ptzControlStart, ptzControlStop } from "@/api/index";
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const deviceId = ref("");
const contentWidth = ref(0);
const contentHeight = ref(0);

onLoad((options) => {
  deviceId.value = options.deviceId;
});
onMounted(() => {
  const { windowWidth, windowHeight } = uni.getSystemInfoSync();
  console.log("怎么个事", windowWidth, windowHeight);
  contentWidth.value = windowWidth;
  contentHeight.value = windowHeight;
});

// 控制相关方法
const handleControl = async (direction: string) => {
  try {
    await ptzControlStart({
      deviceSerial: deviceId.value,
      channelNo: 1,
      direction,
      speed: 0,
    });
  } catch (error) {
    console.error("控制开始失败:", error);
    uni.showToast({ title: "控制失败", icon: "none" });
  }
};

const handleControlStop = async (direction: string) => {
  try {
    await ptzControlStop({
      deviceSerial: deviceId.value,
      channelNo: 1,
      direction,
      speed: 0,
    });
  } catch (error) {
    console.error("控制停止失败:", error);
    uni.showToast({ title: "停止失败", icon: "none" });
  }
};
</script>

<script module="ezuikit" lang="renderjs">
export default {
  props: ['deviceId'], // 声明 props 接收设备 ID
  data() {
    return {
      player: null
    }
  },

  mounted() {
    if (typeof window.EZUIKit !== 'undefined') {
      this.initPlayer();
    } else {
      this.loadEZUIKit();
    }
  },

  methods: {
    loadEZUIKit() {
      const script = document.createElement('script');
      script.src = 'static/ezuikit.js';
      script.onload = this.initPlayer.bind(this);
      document.head.appendChild(script);
    },

    async initPlayer() {
     try {
        // 通过 $ownerInstance 获取设备ID
        await new Promise(resolve => setTimeout(resolve, 0));
        const container = document.querySelector('#video-container');
        const deviceId = container.dataset.deviceId;
        const contentWidth = container.dataset.contentWidth;
        const contentHeight = container.dataset.contentHeight;
        console.log('renderjs contentWidth:', contentWidth,contentHeight); // 调试日志
        console.log('renderjs deviceId:', deviceId); // 调试日志

        const response = await fetch('http://47.122.19.170:9999/dataAccess-service/device/getAccessToken');
        const res = await response.json();
        const accessToken = res.data;

        this.player = new EZUIKit.EZUIKitPlayer({
          id: 'video-container',
          accessToken,
          url: `ezopen://open.ys7.com/${deviceId}/1.hd.live`,
           template:'mobileLive',
           width:contentWidth,
           height:contentHeight - 424,
        });

        window.player = this.player;
      } catch (error) {
        console.error('初始化播放器失败:', error);
      }
    },

    // 播放器控制方法
    async play() {
      try {
        await this.player?.play();
      } catch (error) {
        console.error('播放失败:', error);
      }
    },

    async stop() {
      try {
        await this.player?.stop();
      } catch (error) {
        console.error('停止失败:', error);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background: #fff;

  .preview {
    width: 100%;
    // height: 35vh;
    background-color: #fff;
  }

  .control-panel {
    margin-top: 20rpx;

    .control-buttons {
      position: relative;
      width: 402rpx;
      height: 402rpx;
      margin: 0 auto;

      .control-btn1,
      .control-btn2 {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;

        .iconfont {
          width: 100%;
          height: 100%;
        }
      }

      .control-btn1 {
        width: 124.18rpx;
        height: 84.84rpx;

        &.up {
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }

        &.down {
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .control-btn2 {
        width: 84.84rpx;
        height: 124.18rpx;

        &.left {
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        &.right {
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>
